<template>
    <img src="/home-img.png" class="home-img">

    <div class="login">
        <el-card>
            <el-form
                    :label-position="'top'"
                    label-width="100px"
                    :model="formLabelAlign"
                    style="max-width: 460px"
            >
                <el-form-item>
                    <span>用户登录</span>
                </el-form-item>
                <el-form-item prop="userName" label="用户名"
                              :rules="{required:true,message:'请输入用户名',trigger:'blur'}">
                    <el-input v-model="formLabelAlign.userName" clearable/>
                </el-form-item>
                <el-form-item prop="password" label="密码" :rules="{required:true,message:'请输入密码',trigger:'blur'}">
                    <el-input v-model="formLabelAlign.password" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-link @click="to('/register')">未注册？</el-link>
                    <el-link @click="to('/password')">忘记密码</el-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import request from "@/request"
import store from "@/store";
import {ElMessage} from "element-plus";
import {login} from "@/request/user";

name = "LoginVue"

const router = useRouter();

const formLabelAlign = ref({
    userName: '',
    password: '',
})

const onSubmit = () => {
    if (formLabelAlign.value.userName === '' || formLabelAlign.value.password === '') {
        console.log("error submit!");
        return;
    }
    login(formLabelAlign.value).then(({data}) => {
        if (data.code === 200) {
            let token = data.data.token;
            localStorage.setItem("token", token);
            console.log(token)
            ElMessage({
                message: '登陆成功',
                type: 'success',
            })
            router.push("/")
        } else {
            ElMessage({
                message: '用户名或密码错误',
                type: 'error',
            })
        }
    })
    console.log('submit!')
}

const test = () => {
    request.get("test/hello").then(({data}) => {
        console.log(data)
    })
}

const to = (path) => {
    router.push(path);
};

</script>

<style scoped>
.login {
    /*display: flex;*/
    /*justify-content: center;*/
    /*justify-items: center;*/
    font-size: 16px;
    max-width: 350px;
    min-width: 200px;
    text-align: center;
    margin: 100px auto;
    opacity: 90%;
}

.login span {
    font-size: 22px;
    font-weight: 600;
}

.el-link {
    margin: auto 8px;
    font-size: 13px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}
.home-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -9999;
}
</style>
